<!-- eslint-disable vue/multi-word-component-names -->
<template>
<!-- 精选 -->
  <div>
    <img :src="img" style="width: 100%;">
    <van-divider
      :style="{ color: '#add55d', borderColor: '#7fbb7f', padding: '0 16px' }"
    >
      本周推荐
    </van-divider>
    <div class="top2">
      <div class="selbox" :style="w">
        <div class="selit" v-for="item in msg.jx" :key="item.tid">
          <div>
            <img :src="baseurl+item.timg" alt="">
          </div>
          <div>
            <p>{{ item.tname }}</p>
            <p>￥:{{ item.price }}</p>
          </div>
        </div>
      </div>
    </div>
    <van-divider
      :style="{ color: '#add55d', borderColor: '#7fbb7f', padding: '0 16px' }"
    >
      精选商品
    </van-divider>
    <div class="top3">
      <div class="selit" v-for="item in msg.goods" :key="item.tid">
        <div>
          <img :src="baseurl+item.timg" alt="">
        </div>
        <div>
          <p>{{ item.tname }}</p>
          <p>￥:{{ item.price }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: [],
      baseurl: '', // 图片地址
      img: ''
    }
  },

  // 接收父组件传递过来的参数
  props: {},

  components: {},

  // computed是计算属性，也就是依赖其它的属性计算所得出最后的值
  computed: {
    w () {
      const px = this.msg.jx ? this.msg.jx.length * 160 : 0
      return { width: px + 'px' }
    }
  },

  // 页面初始化方法
  mounted () {
    this.getHome()
  },

  // 监听方法 click事件等 ，执行drawFeatures方法
  methods: {
    getHome () {
      this.$api.Home().then(res => {
        if (res.data.code === 200) {
          this.msg = res.data.msg
          this.baseurl = res.data.msg.baseurl
          this.img = this.baseurl + this.msg.selb
        }
      })
    }
  }
}

</script>
<style lang='less' scoped>
.van-col{
  position: relative;
  text-align: center;
  .fl{
    width: 100%;
    position: absolute;
    // left: 50%;
    top: 15px;
    color: white;
  }
}
.top2{
  width: 100%;
  height: 240px;
  // background-color: red;
  overflow: auto;
  .selbox{
    width: 0px;
    display: flex;
    overflow: hidden;
  }
}
.selit{
  height: 200px;
  width: 150px;
  border: 1px solid green;
  margin: 5px;
  background: white;
  img{
    width: 100%;
  }
  div>p{
    text-indent: 10px;
  }
}
.top3{
  display: flex;
  flex-wrap: wrap;
  .selit{
    margin: 5px 15px;
  }
  justify-content: center;
}
</style>
